<!-- 数据统计 - 员工客户分析 -->
<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="所属模块" prop="moduleId">
        <el-select
          v-model="queryParams.moduleId"
          class="!w-240px"
          placeholder="所属模块"
          @change="handleChangeModule"
        >
          <el-option
            v-for="item in moduleOptionsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属分组" prop="setId">
        <el-select
          v-model="queryParams.setId"
          class="!w-240px"
          placeholder="所属分组"
          @change="loadData"
          clearable
        >
          <el-option
            v-for="item in groupOptionsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="loadData">
          <Icon class="mr-5px" icon="ep:search" />
          查询
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!--  -->
  <!-- Echarts图 -->
  <el-card shadow="never">
    <el-tabs v-model="activeTab" class="mb-20px">
      <!-- 线索标签统计 -->
      <el-tab-pane label="线索标签统计" name="clueTag"> </el-tab-pane>
      <!-- 客户标签统计 -->
      <el-tab-pane label="客户标签统计" name="customerTag"> </el-tab-pane>
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="12">
          <Echart :height="500" :options="echartsOption" v-loading="loading" />
      </el-col>
      <el-col :span="12">
        <el-table v-loading="loading" :data="list" border max-height="500">
          <el-table-column align="center" label="序号" type="index" width="80" />

          <el-table-column align="center" label="标签" min-width="200" prop="name" />
          <el-table-column align="center" label="数量" min-width="200" prop="count" sortable />
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import * as TagApi from '@/api/crm/statistics/tag'
import {getModuleList} from '@/api/crm/module/index'
import {getLabelSetPage} from '@/api/crm/labelset/index'

defineOptions({ name: 'CrmStatisticsTag' })
const moduleOptionsList = ref([])
const groupOptionsList = ref([])


const handleChangeModule = async (m) => {
  queryParams.moduleId = m
  const data = await getLabelSetPage({
    moduleId: m
  })
  groupOptionsList.value = data.list
  loadData()
}

const activeTab = ref('clueTag')
const title = ref('线索标签统计')
// 当 activeTab 改变时，刷新当前活动的 tab
watch(activeTab, (newv) => {
  if(newv == 'customerTag') {
    title.value = '客户标签统计'
  }else {
    title.value = '线索标签统计'
  }
  loadData()
})

const loading = ref(false) // 加载中
const list = ref([]) // 列表的数据

const queryParams = reactive({
  moduleId: undefined,
  setId: undefined
})

const queryFormRef = ref() // 搜索的表单
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.setId = undefined
  loadData()
}

/** 饼图配置（全部客户） */
const echartsOption = reactive<EChartsOption>({
  title: {
    text: title,
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true, name: title } // 保存为图片
    }
  },
  series: [
    {
      name: title,
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
}) as EChartsOption
/** 获取统计数据 */
const loadData = async () => {
  // 1. 加载统计数据
  loading.value = true
  let industryList = null
  if(activeTab.value == 'clueTag') {
    industryList = await TagApi.getClueTag(queryParams)

  }else {
    industryList = await TagApi.getCustomerTag(queryParams)
  }
  // 2.1 更新 Echarts 数据
  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
    echartsOption.series[0]['data'] = industryList.map((r) => {
      return {
        name: r.name,
        value: r.count
      }
    })
  }

  list.value = industryList
  loading.value = false
}

/** 初始化 */
onMounted(async () => {
  moduleOptionsList.value = await getModuleList()
  handleChangeModule(moduleOptionsList.value[0].id)
})
</script>
